{% extends "tracking/tracking_base.html" %}
{% block title %}申请分配{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block page_content %}

<div class="modal fade" id="AssignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">分单</h4>
            </div>
            <div class="modal-body">
		<center>
		<form role="form" id="AssignForm" >
		     <div class="form-group">
		          <input type="hidden" id="order_ids" name="order_ids">
		          <input type="hidden" id="app_type" name="app_type">
			  <label for="service">选择客服</label>
    			  <select class="form-control select2 " id="customer_service" name="customer_service" required>
				{% for person in services %}
      				<option value='{{ person.id }}'>{{ person.name }}</option>
				{% endfor %}
    			  </select>	
 		     </div>
    	     	<button type="button" class="btn btn-default" onclick="assign_submit()" >确定</button>
	        </form>
		</center> 
	    </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<h1 class="page-header">申请分配</h1>
<div class="col-md-12">
    <button type="button" style="margin-left:15px" class="btn btn-success" onclick="get_order()">分单</button>
    <div class="panel-body" style="padding-bottom:0px;">
	<ul id="myTab" class="nav nav-tabs">
            <li id="li_buy" class="active">
		<a href="#buy" data-toggle="tab">购车</a>
   	    </li>
            <li id="li_rent">
		<a href="#rent" data-toggle="tab">租赁</a>
	    </li>
            <li id="li_finance">
		<a href="#finance" data-toggle="tab">金融</a>
	    </li>
            <li id="li_service">
		<a href="#service" data-toggle="tab">服务</a>
	    </li>
            <li id="li_advice">
		<a href="#advice" data-toggle="tab">投诉建议</a>
	    </li>

        </ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="buy"> 
	    	 <table id="tb_buy"></table>
	    </div>
	    <div class="tab-pane fade" id="rent"> 
	    	 <table id="tb_rent"></table>
	    </div>
	    <div class="tab-pane fade" id="finance"> 
	    	 <table id="tb_finance"></table>
	    </div>
	    <div class="tab-pane fade" id="service"> 
	    	 <table id="tb_service"></table>
	    </div>
	    <div class="tab-pane fade" id="advice"> 
	    	 <table id="tb_advice"></table>
	    </div>
	</div>
    </div>
</div>
{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
<script>
    $(document).ready(function() {
  	$(".select2").select2();
    });
</script>
<script>
$(function () {

    //初始化Table
    var tb_buy = new TableInit("tb_buy");
    tb_buy.Init();
    var tb_rent = new TableInit("tb_rent");
    tb_rent.Init();
    var tb_finance = new TableInit("tb_finance");
    tb_finance.Init();
    var tb_service = new TableInit("tb_service");
    tb_service.Init();
    var tb_advice = new TableInit("tb_advice");
    tb_advice.Init();
});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    var urls = new Array();
    var titles = new Array();
    urls['tb_buy'] = "/tracking/assign/get_list/?app_type=buy";
    urls['tb_rent'] = "/tracking/assign/get_list/?app_type=rent";
    urls['tb_finance'] = "/tracking/assign/get_list/?app_type=finance";
    urls['tb_service'] = "/tracking/assign/get_list/?app_type=service";
    urls['tb_advice'] = "/tracking/assign/get_list/?app_type=advice";
    
    titles['tb_buy'] = "车辆信息";
    titles['tb_rent'] = "租赁产品";
    titles['tb_finance'] = "金融产品";
    titles['tb_service'] = "服务产品";

    //初始化Table
    table = document.getElementById(table_id);
    oTableInit.Init = function () {
	var columns;
	if(table_id==="tb_advice"){
		columns = [{
			checkbox: true,
		    }, {
			field: 'oid',
			visible: false,	
		    }, {
			field: 'number',
			title: 'ID',
			align: 'center',
		    }, {
        	        field: 'type',
                	title: '类型',
			align: 'center',
        	    }, {
			field: 'content',
			title: '内容',
			align: 'center',	
		    }, {
        	        field: 'name',
                	title: '提交人',
			align: 'center',
        	    }, {
                	field: 'phone',
	                title: '联系电话',
			align: 'center',
	            }, {
        	        field: 'time',
                	title: '提交时间',
			align: 'center',
        	    }, {
			field: 'area',
			title: '地区',
			align: 'center',
		    },]
	}
	else{
		columns = [{
			checkbox: true,
		    }, {
			field: 'oid',
			visible: false,	
		    }, {
			field: 'number',
			title: 'ID',
			align: 'center',
		    }, {
        	        field: 'title',
                	title: titles[table_id],
			align: 'center',
        	    }, {
                	field: 'name',
	                title: '提交人',
			align: 'center',
	            }, {
        	        field: 'phone',
                	title: '联系电话',
			align: 'center',
        	    }, {
                	field: 'time',
	                title: '提交时间',
			align: 'center',
	            }, {
			field: 'area',
			title: '地区',
			align: 'center',
		    }]
	}
        $(table).bootstrapTable({
            url: urls[table_id],                //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            columns: columns
        });
    };

    return oTableInit;
};

</script>
<script>
    nav = document.getElementById("nav_assign");
    nav.setAttribute("class", "active");
</script>
<script>
    var get_order = function(){

	var ul = document.getElementById("myTab");
	var lis = ul.getElementsByTagName("li");
	var tid = "";
	for(i=0;i<lis.length;i++){
		if(lis[i].getAttribute("class")==="active"){
			tid = lis[i].getAttribute("id").split('_')[1];	
			break;
		}
	}
	if(tid){
    		var sls = $('#tb_'+tid).bootstrapTable('getSelections');
		if(sls.length===0){
			alert('请选择需要分配的申请单');
			return;
		}
		var ids = "";
		for(i in sls){
			ids = ids + sls[i].oid + ';'
		}
		document.getElementById('order_ids').value = ids;
		document.getElementById('app_type').value = tid;
		$("#AssignModal").modal();
	}
    }
</script>

<script>
var state = -1;
var assign_submit = function(){
        $.ajax({
            url: "/tracking/assign/assign_app/",
            data: $("#AssignForm").serialize(),
            type: "POST",
            dataType:"text",
            success: function(data) {

                json = eval("("+data+")");
		state = json.state;
		$('#AssignModal').modal('hide');
        	if(json.state === 0){
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
		    $("#msg").html("分派成功！");
	         }
		else{
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
  		    $('#msg').html("分派失败，" + json.msg);
		}
            },
	    error: function(xhr, error){
		    state = -1;
		    $('#msg_icon').removeAttr('class');
		    $('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
		    $('#msg').html("分派失败，服务器发生错误");
	    }
        });
	$('#MsgModal').modal();
	return;
};

$(document).ready(function(){
	$('#MsgModal').on('hidden.bs.modal', function () {
		if(state === 0){
			var ul = document.getElementById("myTab");
			var lis = ul.getElementsByTagName("li");
			var tid = "";
			for(i=0;i<lis.length;i++){
				if(lis[i].getAttribute("class")==="active"){
					tid = lis[i].getAttribute("id").split('_')[1];	
					break;
				}
			}
			$("#tb_"+tid).bootstrapTable('refresh', {'silent': true});
		}
	});
})

</script>
{% endblock %}
